<template>
	<div class="default-main">
		<div class="logo-container cus-center">
			<el-image :src="IMAGE_URL.logoLargeUrl" class="logo" fit="contain"/>
		</div>
		<div class="pictures-container text-center">
			<el-carousel :height="carouselHeight" :interval="3000" arrow="always" indicator-position="outside" pause-on-hover type="card">
				<el-carousel-item v-for="(imageUrl, index) in DASHBOARD_PICTURE_URL" :key="'dashboard-pictures_' + index">
					<el-image :src="imageUrl" class="picture" fit="contain"/>
				</el-carousel-item>
			</el-carousel>
		</div>
		<!--<el-text class="text cus-center" type="primary">God bless FICSIT !!!</el-text>-->
		<el-text class="text cus-center" size="large" type="primary">QQ交流群：926212559 | 公众号：幸福工厂游戏工具 | B站：
			<el-link :underline="false" href="https://space.bilibili.com/40760541" style="font-size: 30px;font-weight: bold" target="_blank" type="primary">
				https://space.bilibili.com/40760541
			</el-link>
		</el-text>
	</div>
</template>

<script lang="ts" name="Dashboard" setup>

import {onActivated, onMounted, ref} from 'vue'
import {getMainHeight} from '@/utils/layoutUtil'
import {useEventListener} from '@vueuse/core'
import {onBeforeRouteLeave} from 'vue-router'
import {DASHBOARD_PICTURE_URL, IMAGE_URL} from '@/utils/constantsUtil'

const logoHeight = ref('0px')
const carouselHeight = ref('0px')
const textHeight = ref('0px')

const calcHeight = () => {
	let mainHeight = getMainHeight()
	mainHeight -= 40
	logoHeight.value = mainHeight.mul(0.2) + 'px'
	carouselHeight.value = mainHeight.mul(0.65) + 'px'
	textHeight.value = mainHeight.mul(0.15) + 'px'
	return calcHeight
}

onMounted(() => {
	useEventListener(window, 'resize', calcHeight()!)
})

// 该页面开启缓存且首次或后续进入时执行，刷新页面不执行
onActivated(() => {
	useEventListener(window, 'resize', calcHeight()!)
})

onBeforeRouteLeave(() => {
	window.removeEventListener('resize', calcHeight)
})

</script>

<style lang="scss" scoped>
.logo-container {
	height: v-bind(logoHeight);

	.logo {
		width: auto;
		height: 100%;
	}
}

.pictures-container {
	height: v-bind(carouselHeight);
	margin-top: 20px;

	.picture {
		width: auto;
		height: 100%;
		background: var(--cus-bg-color);
	}
}

.text {
	height: v-bind(textHeight);
	margin-top: 20px;
	text-align: center;
	font-weight: bold;
	font-size: 30px;
}
</style>
